<template>

    <div class="contain ">
        <ul class="nav">
            <li class="center-all first-li left-item"> 菜鸟拯救世界のblog </li>

            <li class="center-all hidden-right" @click="btn_home()">
                <el-icon>
                    <HomeFilled />
                </el-icon>&nbsp;
                主页
            </li>

            <li class="center-all hidden-right" @click="btn_archive()">
                <el-icon>
                    <Memo />
                </el-icon>&nbsp;
                归档
            </li>

            <li class="center-all hidden-right" @click="btn_sendMessage()">
                <el-icon>
                    <ChatDotRound />
                </el-icon>&nbsp;
                匿名信
            </li>

            <li class="center-all hidden-right" @click="btn_hexo()">
                <el-icon>
                    <Link />
                </el-icon>&nbsp;
                Hexo
            </li>

            <li class="center-all hidden-right" @click="btn_about()">
                <el-icon>
                    <Link />
                </el-icon>&nbsp;
                关于
            </li>


            <!-- 最后一个图标 -->
            <li class="center-all end-li hidden-right" @click="btn_login()">
                <el-icon>
                    <SetUp />
                </el-icon>&nbsp;管理
            </li>


            <!-- 以下是手机端图标的设置 -->
            <li class="center-all end-li hidden-mobile-style">
                <el-button style="background-color: antiquewhite;" @click="drawer2 = true">
                    <el-icon>
                        <Operation />
                    </el-icon>
                </el-button>
            </li>
        </ul>

    </div>


    <!-- 以下是手机端侧边栏的设置 -->
    <el-drawer v-model="drawer2" :direction="direction" size="50%">
        <template #header>
            <h3>菜鸟拯救世界のblog</h3>
        </template>

        <!-- <template #default> -->
        <!-- 这里面放内容 -->
        <div>
            <!-- <el-radio v-model="radio1" value="Option 1" size="large">
                    Option 1
                </el-radio>
                <el-radio v-model="radio1" value="Option 2" size="large">
                    Option 2
                </el-radio> -->
            <u class="phone-nav">

                <li @click="btn_home()">
                    <el-icon>
                        <HomeFilled />
                    </el-icon>&nbsp;
                    主页
                </li>

                <li @click="btn_archive()">
                    <el-icon>
                        <Memo />
                    </el-icon>&nbsp;
                    归档
                </li>

                <li @click="btn_sendMessage()">
                    <el-icon>
                        <ChatDotRound />
                    </el-icon>&nbsp;
                    匿名信
                </li>

                <li @click="btn_hexo()">
                    <el-icon>
                        <Link />
                    </el-icon>&nbsp;
                    Hexo
                </li>

                <li  @click="btn_about()">
                    <el-icon>
                        <UserFilled />
                    </el-icon>
                    &nbsp;关于
                </li>

                <!-- 最后一个图标 -->
                <li  @click="btn_login()">
                    <el-icon>
                        <SetUp />
                    </el-icon>
                    <span style="white-space: nowrap; text-decoration: none;">&nbsp;</span>
                    管理
                </li>
            </u>
        </div>

        <!-- </template> -->

    </el-drawer>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import type { DrawerProps } from 'element-plus'
import { useRouter } from 'vue-router';

// const drawer = ref(false)
const drawer2 = ref(false)
const direction = ref<DrawerProps['direction']>('ttb')

const router = useRouter();
function btn_home() {
    router.push('/home')
}
function btn_about() {
    router.push('/about')
}
function btn_archive() {
    router.push('/archive')
}
function btn_sendMessage() {
    router.push('/message')
}
function btn_hexo() {
    window.location.href = "http://wzy9858.top:8989/"
}

function btn_login(){
    router.push('/manage/visitor')
}

</script>

<style scoped>
/* 媒体查询(手机端) */
@media (max-width: 768px) {
    .hidden-right {
        display: none;
    }

    .hidden-mobile-style {
        display: flex;
    }
}

/* 媒体查询（电脑端） */
@media (min-width: 769px) {
    .hidden-mobile-style {
        display: none;
    }
}

/* 手机端隐藏最右边的 */
.hidden-right {}

/* 电脑端隐藏手机端图标 */
.hidden-mobile-style {}

.contain {
    background-color: rgb(23, 24, 24);
    height: 4rem;
    display: flex;
    align-items: center;
    width: 100%;
    /* position: fixed; */
    /* top: 0; */

}

/* 电脑端导航 */
.nav {
    list-style-type: none;
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: space-between;
}

.nav li {
    height: 100%;
    color: aliceblue;
    padding-left: 0.6rem;
    padding-right: 0.6rem;
}

.nav li:hover {
    background-color: rgb(42, 43, 42);
}

.first-li {
    margin-left: 5%;
}

.end-li {
    margin-right: 5%;
}

.left-item {
    margin-right: auto;
    /* 将左对齐的列表项推向左边 */
}

.right-item {
    margin-left: auto;
    /* 将右对齐的列表项推向右边 */
}

/* 以下是手机端导航 */
.phone-nav {
    /* list-style-type: none; */
    text-decoration: none !important;
}

.phone-nav li {
    height: 4rem;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: large;
}

.phone-nav li:hover {
    background-color: rgb(227, 237, 237);
}
</style>